<template>
	<view class="content">
		<view class="header">
			<view class="welcome">
				<view class="welcome-text">
					<text class="hello">您好，</text>
					<text class="username">{{userInfo.nickName || '保安员'}}</text>
				</view>
				<text class="date">{{currentDate}}</text>
			</view>
			<view class="avatar">
				<image :src="userInfo.avatarUrl || '/static/logo.png'" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 巡查状态卡片 -->
		<view class="status-card">
			<view class="status-info">
				<text class="status-title">今日巡查</text>
				<text class="status-count">{{patrol.completed}}/{{patrol.total}}</text>
			</view>
			<view class="progress-bar">
				<view class="progress" :style="{ width: patrol.percentage + '%' }"></view>
			</view>
			<text class="status-tips">请按时完成巡查任务</text>
		</view>
		
		<!-- 功能模块 -->
		<view class="module-title">功能菜单</view>
		<view class="module-grid">
			<view class="module-item" v-for="(item, index) in modules" :key="index" @click="navigate(item.url)">
				<view class="module-icon" :class="item.iconClass">
					<image :src="item.icon" mode="aspectFit"></image>
				</view>
				<text class="module-name">{{item.name}}</text>
			</view>
		</view>
		
		<!-- 最近隐患 -->
		<view class="recent-title">
			<text>最新隐患</text>
			<text class="view-all" @click="navigate('/pages/hidden-danger/list')">查看全部</text>
		</view>
		<view class="danger-list" v-if="recentDangers.length > 0">
			<view class="danger-item" v-for="(item, index) in recentDangers" :key="index" @click="navigate('/pages/hidden-danger/detail?id=' + item.id)">
				<view class="danger-info">
					<text class="danger-title">{{item.hazardDesc}}</text>
					<text class="danger-desc">{{item.hazardLocation}} · {{formatTime(item.discoveryTime)}}</text>
				</view>
				<view class="danger-status" :class="'status-' + item.status">{{getStatusText(item.status)}}</view>
			</view>
		</view>
		<view class="empty-data" v-else>
			<text>暂无隐患记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: '',
				userInfo: {
					nickName: '保安员',
					avatarUrl: '/static/logo.png'
				},
				patrol: {
					total: 8,
					completed: 5,
					percentage: 62.5
				},
				modules: [
					{
						name: '隐患排查',
						icon: '/static/隐患上传.png',
						iconClass: 'icon-danger',
						url: '/pages/hidden-danger/add'
					},
					{
						name: '隐患列表',
						icon: '/static/隐患列表.png',
						iconClass: 'icon-list',
						url: '/pages/hidden-danger/list'
					},
					{
						name: '日常检查',
						icon: '/static/icon-check.png',
						iconClass: 'icon-check',
						url: '/pages/daily-check/index'
					},
					{
						name: '今日巡查',
						icon: '/static/icon-patrol.png',
						iconClass: 'icon-patrol',
						url: '/pages/patrol/today'
					},
					{
						name: '历史记录',
						icon: '/static/icon-history.png',
						iconClass: 'icon-history',
						url: '/pages/patrol/history'
					},
					{
						name: '我的设置',
						icon: '/static/icon-setting.png',
						iconClass: 'icon-setting',
						url: '/pages/my/setting'
					}
				],
				recentDangers: [],
				hazardTypes: []
			}
		},
		onLoad() {
			this.getCurrentDate();
			this.getUserInfo();
			this.getHazardTypes();
		},
		onShow() {
			this.getUserInfo();
			this.getRecentDangers();
		},
		methods: {
			getUserInfo() {
				try {
					const userInfoStorage = uni.getStorageSync('userInfo');
					if (userInfoStorage) {
						this.userInfo = userInfoStorage;
						console.log('首页获取到用户信息', this.userInfo);
					} else {
						console.log('未找到用户信息，可能未登录');
						uni.redirectTo({
							url: '/pages/login/index'
						});
					}
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			getCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const weekday = weekdays[date.getDay()];
				this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
			},
			navigate(url) {
				// 检查是否是tabBar页面
				if (url === '/pages/index/index' || 
					url === '/pages/patrol/today' || 
					url === '/pages/hidden-danger/list' || 
					url === '/pages/my/setting') {
					uni.switchTab({
						url: url
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			getRecentDangers() {
				uni.request({
					url: 'http://172.20.10.3:9527/security/hazard/page',
					method: 'GET',
					data: {
						pageNum: 1,
						pageSize: 3,
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							const data = res.data.data;
							this.recentDangers = data.records;
						} else {
							console.error('获取最新隐患失败:', res.data);
						}
					},
					fail: (err) => {
						console.error('请求最新隐患接口失败:', err);
					}
				});
			},
			getHazardTypes() {
				uni.request({
					url: 'http://172.20.10.3:9527/security/hazardtype/list',
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							this.hazardTypes = res.data.data;
						} else {
							console.error('获取隐患类型失败:', res.data);
						}
					},
					fail: (err) => {
						console.error('请求隐患类型接口失败:', err);
					}
				});
			},
			getStatusText(status) {
				const statusMap = {
					0: '待审核',
					1: '待处理',
					2: '待验证',
					3: '已完成'
				};
				return statusMap[status] || '未知';
			},
			formatTime(timestamp) {
				if (!timestamp) return '';
				
				const now = new Date();
				const date = new Date(timestamp);
				
				const timeDiff = now.getTime() - date.getTime();
				const dayDiff = Math.floor(timeDiff / (24 * 3600 * 1000));
				
				const hour = date.getHours().toString().padStart(2, '0');
				const minute = date.getMinutes().toString().padStart(2, '0');
				
				if (dayDiff === 0) {
					return `今天 ${hour}:${minute}`;
				} else if (dayDiff === 1) {
					return `昨天 ${hour}:${minute}`;
				} else if (dayDiff < 7) {
					return `${dayDiff}天前`;
				} else {
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					return `${month}-${day} ${hour}:${minute}`;
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		background-color: #f5f6fa;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.welcome {
		display: flex;
		flex-direction: column;
	}
	
	.welcome-text {
		display: flex;
		align-items: baseline;
		margin-bottom: 10rpx;
	}
	
	.hello {
		font-size: 34rpx;
		color: #333;
	}
	
	.username {
		font-size: 42rpx;
		font-weight: bold;
		color: #1a4380;
		margin-left: 10rpx;
	}
	
	.date {
		font-size: 24rpx;
		color: #999;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid #f0f0f0;
		background-color: #fff;
	}
	
	.avatar image {
		width: 100%;
		height: 100%;
	}
	
	/* 巡查状态卡片 */
	.status-card {
		background: linear-gradient(to right, #1a4380, #2b6ac4);
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(26, 67, 128, 0.2);
		color: #fff;
		margin-bottom: 30rpx;
	}
	
	.status-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.status-title {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.status-count {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.progress-bar {
		height: 14rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.progress {
		height: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		transition: width 0.3s;
	}
	
	.status-tips {
		font-size: 24rpx;
		opacity: 0.8;
	}
	
	/* 功能模块 */
	.module-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 30rpx 0 20rpx;
		color: #333;
	}
	
	.module-grid {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.module-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.module-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #f0f5ff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}
	
	.module-icon image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.icon-danger {
		background-color: #fff2f0;
	}
	
	.icon-list {
		background-color: #f0f7ff;
	}
	
	.icon-check {
		background-color: #f0fff5;
	}
	
	.icon-patrol {
		background-color: #f0f5ff;
	}
	
	.icon-history {
		background-color: #f7f0ff;
	}
	
	.icon-setting {
		background-color: #f5f5f5;
	}
	
	.module-name {
		font-size: 26rpx;
		color: #333;
	}
	
	/* 最近隐患 */
	.recent-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.view-all {
		font-size: 26rpx;
		color: #1a4380;
		font-weight: normal;
	}
	
	.danger-list {
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	.danger-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.danger-item:last-child {
		border-bottom: none;
	}
	
	.danger-info {
		flex: 1;
		margin-right: 20rpx;
	}
	
	.danger-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.danger-desc {
		font-size: 24rpx;
		color: #999;
	}
	
	.danger-status {
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	
	.status-0 {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.status-1 {
		background-color: #fff2e8;
		color: #fa8c16;
	}
	
	.status-2 {
		background-color: #f0f5ff;
		color: #597ef7;
	}
	
	.status-3 {
		background-color: #f6ffed;
		color: #52c41a;
	}
	
	.empty-data {
		padding: 60rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
